<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,
  maximum-scale=1,minimum-scale=1,user-scalable=no">
  <title>一个小站</title>

  <link rel="Shortcut Icon" href="image/favicon.ico">

  <link rel="stylesheet" href="css/css.css">
  <link rel="stylesheet" href="css/iconfont.css">
  <script src="css/iconfont.js"></script>
  <style type="text/css">
    .icon {
      width: 2em;
      height: 2em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden; 
      /* 溢出隐藏 */
    }
  </style>
</head>

<body>
  <div class="bgBox">
    <!-- 首页部分 -->
    <section class="header">
      <div class="head_body">
        <!-- 第一部分de头部部分，分为三个小部分 -->
        <div class="head">
          <div class="pc_head">
            <!-- logo区域 -->
            <div class="head_logo">
              <img src="image/BILIBILI_LOGO.png" alt="">
            </div>
            <!-- 中间菜单区域 -->
            <div class="head_menu">
              <ul class="head_menu_">
                <!--首页、归档、清单、留言板、友人帐、赞赏、关于、小破站-->
                <li class="iconfont icon-fangzi">
                  <a href="http://tblxm.gitee.io/html-demo1">首页</a>
                </li>
                <li class="iconfont icon-xiaoxihezi-shi">归档</li>
                <li class="iconfont icon-caidan1">清单</li>
                <li class="iconfont icon-jurassic_message">留言板</li>
                <li class="iconfont icon-lianjie">友人帐</li>
                <li class="iconfont icon-dianzan">赞赏</li>
                <li class="iconfont icon-iconfontzhizuobiaozhun023143">关于</li>
                <li class="iconfont icon-CN_bilibili">
                  <a href="https://space.bilibili.com/57179340">小破站</a>
                </li>
              </ul>
            </div>
            <!-- 右边区域 -->
            <div class="head_btn">
              <ul class="head_btn_">
                <li class="iconfont icon-search"></li>
                <li class="iconfont icon-user"></li>
              </ul>
            </div>
          </div>

          <!-- 手机端 -->
          <div class="phone_head">
            <div class="phone_menu">
              <svg t="1592815905796" class="icon" viewBox="0 0 1170 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="1743" width="200" height="200">
                <path
                  d="M1142.858606 48.420571v95.305143a45.714286 45.714286 0 0 1-14.116572 33.426286 45.933714 45.933714 0 0 1-33.426285 14.116571H47.54432a45.714286 45.714286 0 0 1-33.426286-14.116571A45.714286 45.714286 0 0 1 0.001463 143.725714V48.420571C0.001463 35.547429 4.682606 24.429714 14.118034 14.994286A45.714286 45.714286 0 0 1 47.54432 0.877714h1047.771429c12.8 0 23.990857 4.681143 33.426285 14.116572a45.714286 45.714286 0 0 1 14.116572 33.426285z m0 380.854858v95.305142a45.714286 45.714286 0 0 1-14.116572 33.426286 45.933714 45.933714 0 0 1-33.426285 14.116572H47.54432a45.714286 45.714286 0 0 1-33.426286-14.116572A45.714286 45.714286 0 0 1 0.001463 524.580571V429.275429c0-12.873143 4.681143-23.990857 14.116571-33.426286A45.714286 45.714286 0 0 1 47.54432 381.805714h1047.771429c12.8 0 23.990857 4.681143 33.426285 14.116572a45.933714 45.933714 0 0 1 14.116572 33.426285z m0 381.147428v95.305143a45.714286 45.714286 0 0 1-14.116572 33.426286 45.933714 45.933714 0 0 1-33.426285 14.116571H47.54432a45.714286 45.714286 0 0 1-33.426286-14.116571 45.714286 45.714286 0 0 1-14.116571-33.426286V810.422857c0-12.873143 4.681143-23.990857 14.116571-33.426286a45.714286 45.714286 0 0 1 33.426286-14.116571h1047.771429c12.8 0 23.990857 4.681143 33.426285 14.116571s14.116571 20.48 14.116572 33.426286z"
                  p-id="1744"></path>
              </svg>
            </div>
            <div class="phone_title">一个小站</div>
          </div>
        </div>
        <!-- 头部部分结束 -->
        <!-- 第一部分的main部分 -->
        <div class="main">
          <div class="main_box1">
            <h1 class="main_box1_text">Hi,陌生人你好</h1>
          </div>
          <div class="main_box2">
            <p class="info_text">
              <i class="iconfont icon-quotation"></i>
              You got to put the past behind you before you can move on.
              <i class="iconfont icon-quotation-copy"></i>
            </p>
            <div class="main_box2_infoBox">
              <ul class="info">
                <li>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiantou-drop-up-xian"></use>
                  </svg>
                </li>
                <li>
                  <a href="https://weibo.com/?topnav=1&mod=logo">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-weibo"></use>
                    </svg>
                  </a>
                </li>
                <li>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zhihu"></use>
                  </svg>
                </li>
                <li>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zhifeiji"></use>
                  </svg>
                </li>
                <li>
                  <a href="https://music.163.com/#/my/m/music/playlist?id=488935397">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-wangyiyun"></use>
                    </svg>
                  </a>
                </li>
                <li>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-test"></use>
                  </svg>
                </li>
                <li>
                  <a
                    href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=1505483404&website=www.oicqzone.com">

                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-qq"></use>
                    </svg>
                  </a>
                </li>
                <li>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiantou-drop-up-xian-copy"></use>
                  </svg>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- main部分结束 -->
        <div class="footer">
          <i class="down">
            <svg t="1592786143793" class="icon down1" viewBox="0 0 1638 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="12330" width="3em">
              <path
                d="M1352.82688 51.4048C1385.49248 17.1008 1424.50688 0 1470.48448 0c45.8752 0 84.992 17.1008 117.5552 51.4048 33.6896 34.2016 50.4832 75.1616 50.4832 122.88 0 47.7184-16.7936 88.6784-50.4832 122.88l-651.264 682.496a109.1584 109.1584 0 0 1-52.224 35.84c-20.7872 6.656-42.9056 9.4208-66.1504 8.192a211.7632 211.7632 0 0 1-68.7104-15.5648 164.5568 164.5568 0 0 1-58.368-39.424L50.50368 297.1648A169.1648 169.1648 0 0 1 0.02048 174.2848c0-47.7184 16.7936-88.6784 50.4832-122.88A161.9968 161.9968 0 0 1 168.05888 0c21.504 0 42.5984 4.3008 63.488 12.8 20.8896 8.6016 39.5264 21.504 55.808 38.6048l532.7872 553.984L1352.72448 51.4048z"
                p-id="12331" fill="#ffffff"></path>
            </svg>
          </i>
        </div>
        <div class="footer1">

        </div>
      </div>
    </section>
    <!-- 首页部分结束 -->

    <!-- main部分 -->
    <section class="mainBox">
      <div class="mainBody">
        <!-- 第一个标签页 -->
        <div class="mainBodyBox1">
          <!-- 标签左边的文章部分 -->
          <div class="mainBodyBox1Title">
            <i class="iconfont icon-iconfontzhizuobiaozhun023143"> Start：Naruto vs Sasuke!</i>
          </div>
          <!-- 标签右边的图片部分 -->
          <div class="mainBodyBox1Main">
            <div class="boxMainPage">
              <h3>兄弟の羁绊</h3>
              <div class="page">
                电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。
                故事成功地将原本隐藏在黑暗中，用世界上最强大的毅力和最艰辛的努力去做最密不可宣和隐讳残酷的事情的忍者，描绘成了太阳下最值得骄傲最光明无限的职业。
                系列续作《BORUTO -火影新世代- 》2017年4月播出。
              </div>
            </div>
            <div class="boxMainImg">
              <img src="image/box1.jpg" alt="">
            </div>
          </div>
        </div>
        <!-- 第一个标签页结束 -->

        <!-- 第二个标签页 -->
        <div class="mainBodyBox1">
          <!-- 标签左边的文章部分 -->
          <div class="mainBodyBox1Title">
            <i class="iconfont icon-iconfontzhizuobiaozhun023143"> Start：Boruto!</i>
          </div>
          <!-- 标签右边的图片部分 -->
          <div class="mainBodyBox1Main">
            <div class="boxMainPage">
              <h3>儿子传动画的开始</h3>
              <div class="page">
                电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。
                故事成功地将原本隐藏在黑暗中，用世界上最强大的毅力和最艰辛的努力去做最密不可宣和隐讳残酷的事情的忍者，描绘成了太阳下最值得骄傲最光明无限的职业。
                系列续作《BORUTO -火影新世代- 》2017年4月播出。
              </div>
            </div>
            <div class="boxMainImg">
              <img src="image/box2.jpg" alt="">
            </div>
          </div>
        </div>
        <!-- 第二个标签页结束 -->


        <!-- 第三个标签页 -->
        <div class="mainBodyBox1">
          <!-- 标签左边的文章部分 -->
          <div class="mainBodyBox1Title">
            <i class="iconfont icon-iconfontzhizuobiaozhun023143"> Start：常用的工具小站!</i>
          </div>
          <!-- 标签右边的图片部分 -->
          <div class="mainBodyBox1Main">
            <div class="boxMainPage">
              <h3>常用的小站</h3>
              <div class="page">
                <a href="https://transparent.zhaoxi.net/">图片去底色的小站(＾Ｕ＾)ノ~ＹＯ</a></br>
                <a href="https://www.easyicon.net/covert/">图片转为ico的小站ᕦ(･ㅂ･)ᕤ</a></br>
                <a href="https://www.uupoop.com/">在线ps的小站(✪ω✪)</a>
              </div>
            </div>
            <div class="boxMainImg">
              <img src="image/mode3.jpeg" alt="">
            </div>
          </div>
        </div>
        <!-- 第三个标签页结束 -->
      </div>
    </section>
    <!-- main部分结束 -->
  </div>
</body>

</html>